1 /**
2 * @author Stéphane Roucheray
3 * @extends jQuery
4 */
5
6 jQuery.fn.dynamicForm = function (plusElmnt, minusElmnt, options){
7 var source = jQuery(this),
8 minus = jQuery(minusElmnt),
9 plus = jQuery(plusElmnt),
10 template = source.clone(true),
11 fieldId = 0,
12 formFields = "input, checkbox, select, textarea",
13 insertBefore = source.next(),
14 clones = [],
15 defaults = {
16 duration:1000
17 };
18
19 // Extend default options with those provided
20 options = $.extend(defaults, options);
21
22 isPlusDescendentOfTemplate = source.find("*").filter(function(){
23 return this == plus.get(0);
24 });
25
26 isPlusDescendentOfTemplate = isPlusDescendentOfTemplate.length > 0 ? true : false;
27
28 function normalizeElmnt(elmnt){
29 elmnt.find(formFields).each(function(){
30 var nameAttr = jQuery(this).attr("name"),
31 idAttr = jQuery(this).attr("id");
32
33 /* Normalize field name attributes */
34 if (!nameAttr) {
35 jQuery(this).attr("name", "field" + fieldId + "[]");
36 }
37
38 if (!/\[\]$/.exec(nameAttr)) {
39 jQuery(this).attr("name", nameAttr + "[]");
40 }
41
42 /* Normalize field id attributes */
43 if (idAttr) {
44 /* Normalize attached label */
45 jQuery("label[for='"+idAttr+"']").each(function(){
46 jQuery(this).attr("for", idAttr + fieldId);
47 });
48
49 jQuery(this).attr("id", idAttr + fieldId);
50 }
51 fieldId++;
52 });
53 };
54
55 /* Hide minus element */
56 minus.hide();
57
58 /* If plus element is within the template */
59 if (isPlusDescendentOfTemplate) {
60 function clickOnPlus(event){
61 var clone,
62 currentClone = clones[clones.length -1] || source;
63 event.preventDefault();
64
65 /* On first add, normalize source */
66 if (clones.length == 0) {
67 normalizeElmnt(source);
68 currentClone.find(minusElmnt).hide();
69 currentClone.find(plusElmnt).hide();
70 }else{
71 currentClone.find(plusElmnt).hide();
72 }
73
74 /* Clone template and normalize it */
75 clone = template.clone(true).insertAfter(clones[clones.length - 1] || source);
76 normalizeElmnt(clone);
77
78 /* Normalize template id attribute */
79 if (clone.attr("id")) {
80 clone.attr("id", clone.attr("id") + clones.length);
81 }
82
83
84 plus = clone.find(plusElmnt);
85 minus = clone.find(minusElmnt);
86
87 minus.get(0).removableClone = clone;
88 minus.click(clickOnMinus);
89 plus.click(clickOnPlus);
90
91 if (options.limit && (options.limit - 2) > clones.length) {
92 plus.show();
93 }else{
94 plus.hide();
95 }
96
97 clones.push(clone);
98 }
99
100 function clickOnMinus(event){
101 event.preventDefault();
102
103 if (this.removableClone.effect && options.removeColor) {
104 that = this;
105 this.removableClone.effect("highlight", {
106 color: options.removeColor
107 }, options.duration, function(){that.removableClone.remove();});
108 } else {
109
110 this.removableClone.remove();
111 }
112 clones.splice(clones.indexOf(this.removableClone),1);
113 if (clones.length == 0){
114 source.find(plusElmnt).show();
115 }else{
116 clones[clones.length -1].find(plusElmnt).show();
117 }
118 }
119
120 /* Handle click on plus */
121 plus.click(clickOnPlus);
122
123 /* Handle click on minus */
124 minus.click(function(event){
125
126 });
127
128 }else{
129 /* If plus element is out of the template */
130 /* Handle click on plus */
131 plus.click(function(event){
132 var clone;
133
134 event.preventDefault();
135
136 /* On first add, normalize source */
137 if (clones.length == 0) {
138 normalizeElmnt(source);
139 jQuery(minusElmnt).show();
140 }
141
142 /* Clone template and normalize it */
143 clone = template.clone(true).insertAfter(clones[clones.length - 1] || source);
144 if (clone.effect && options.createColor) {
145 clone.effect("highlight", {color:options.createColor}, options.duration);
146 }
147 normalizeElmnt(clone);
148
149 /* Normalize template id attribute */
150 if (clone.attr("id")) {
151 clone.attr("id", clone.attr("id") + clones.length);
152 }
153 if (options.limit && (options.limit - 3) < clones.length) {
154 plus.hide();
155 }
156 clones.push(clone);
157 });
158
159 /* Handle click on minus */
160 minus.click(function(event){
161 event.preventDefault();
162 var clone = clones.pop();
163 if (clones.length >= 0) {
164 if (clone.effect && options.removeColor) {
165 that = this;
166 clone.effect("highlight", {
167 color: options.removeColor, mode:"hide"
168 }, options.duration, function(){clone.remove();});
169 } else {
170 clone.remove();
171 }
172 }
173 if (clones.length == 0) {
174 jQuery(minusElmnt).hide();
175 }
176 plus.show();
177 });
178 }
179
180 };
